<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用药监测</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../common/css/vant-index.css" />
    <link rel="stylesheet" href="../css/monitor.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="../../common/js/vue.min.js"></script>
    
    <script src="../../common/js/axios.min.js"></script>
    <script src="../../common/js/vue.global.prod.js"></script>
    <!-- 引入 viewer 图片预览样式文件 -->
    <link href="../../common/css/viewer.css" rel="stylesheet" />



</head>

<body>
    <div id="app" v-cloak>
        <van-nav-bar title="用药监测" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <template #right>
                <van-icon name="wap-home-o" size='18' />
            </template>
        </van-nav-bar>
        <div class="diet_header">
            <van-cell is-link @click="showPopup">
                <span class="columnsValue">{{columnsValue}}</span>
            </van-cell>
            <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
                <van-picker show-toolbar title="时间选择" :columns="columns" :default-index="0" @cancel="show = false"
                    @confirm="onConfirm" />
            </van-popup>
        </div>
        <div class="diet_body">
            <van-list v-if="nothing==1" v-model="loading" :finished="finished" finished-text="没有更多了">

                <van-cell center v-for="item in list" :key="item">
                    <div class="diet_list_one" v-if="item.medicalRecordMorning">
                        <img id="dietIcon" style="float: left;" src="../img/bloodprofile/medical.png" alt="">
                        <div class="diet_content">
                            <div class="diet_type">早用药
                            </div>
                            <span
                                class="evalution_size">{{item.medicalRecordMorning?item.medicalRecordMorning.recordTime:item.recordDate}}</span>

                            <div v-if="item.medicalRecordMorning" class="diet_photo">

                                <div v-viewer="{movable: false}">
                                    <img v-for="item1 in item.medicalRecordMorning.medicalRecordPhoto" :src="item1"
                                        :key="index" style="margin-right:1rem;" />
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="diet_list_two" v-if="item.medicalRecordNoon">
                        <img id="dietIcon" style="float: left;" src="../img/bloodprofile/medical.png" alt="">
                        <div class="diet_content">
                            <div class="diet_type">午用药
                            </div>
                            <span
                                class="evalution_size">{{item.medicalRecordNoon?item.medicalRecordNoon.recordTime:item.recordDate}}</span>

                            <div v-if="item.medicalRecordNoon" class="diet_photo">

                                <div v-viewer="{movable: false}">
                                    <img v-for="item1 in item.medicalRecordNoon.medicalRecordPhoto" :src="item1"
                                        :key="index" style="margin-right:1rem;" />
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="diet_list_three" v-if="item.medicalRecordNight">
                        <img id="dietIcon" style="float: left;" src="../img/bloodprofile/medical.png" alt="">
                        <div class="diet_content">
                            <div class="diet_type">晚用药
                            </div>
                            <span
                                class="evalution_size">{{item.medicalRecordNight?item.medicalRecordNight.recordTime:item.recordDate}}</span>

                            <div v-if="item.medicalRecordNight" class="diet_photo">

                                <div v-viewer="{movable: false}">
                                    <img v-for="item1 in item.medicalRecordNight.medicalRecordPhoto" :src="item1"
                                        :key="index" style="margin-right:1rem;" />
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="diet_list_three" v-if="item.medicalRecordBeforeSleep">
                        <img id="dietIcon" style="float: left;" src="../img/bloodprofile/medical.png" alt="">
                        <div class="diet_content">
                            <div class="diet_type">睡前用药
                            </div>
                            <span
                                class="evalution_size">{{item.medicalRecordBeforeSleep?item.medicalRecordBeforeSleep.recordTime:item.recordDate}}</span>
                            <div v-if="item.medicalRecordBeforeSleep" class="diet_photo">

                                <div v-viewer="{movable: false}">
                                    <img v-for="item1 in item.medicalRecordBeforeSleep.medicalRecordPhoto" :src="item1"
                                        :key="index" style="margin-right:1rem;" />
                                </div>

                            </div>
                        </div>
                    </div>
                </van-cell>
                <van-pagination v-model="currentPage" @click="pageChange" :page-count="this.totalPage" mode="simple" />
            </van-list>
            <div v-if="nothing==2" class="none_info">
                <img src="../img/bloodprofile/none.png" />
                <p style="font-size: 12px;">— 暂无数据 —</p>
            </div>
        </div>
    </div>
</body>
<!-- viewer 图片预览 -->
<script src="../../common/js/vant.min.js"></script>
<script src="../../common/js/viewer.js"></script>
<script src="../../common/js/index.umd.js"></script>
<script src="../../base.js"></script>
<script type="module">

    import {
        getAction,
        postAction,
        getUrl,
    } from "../../common/js/api/vue3-axios-utils.js";

    const app = Vue.createApp({

        data() {
            return {
                url: {
                    getMedicalList: "/101/04/1010402",
                },
                show: false,
                currentPage: 1,
                totalPage: 0,
                columns: ['最近两周', '最近一个月', '最近三个月', '全部'],
                columnsValue: '最近两周',
                nothing: 1,
                list: [],
                period: 2,
                loading: false,
                finished: false,
            }
        },
        methods: {
            pageChange() {
                this.getMedicalList()

            },
            showPopup() {
                this.show = true
            },
            onConfirm(value, index) {
                console.log(value, index);
                this.columnsValue = value
                this.show = false
                if (index == 0) {
                    this.period = 2
                }
                if (index == 1) {
                    this.period = 3
                }
                if (index == 2) {
                    this.period = 5
                }
                if (index == 3) {
                    this.period = 0
                }
                this.getMedicalList()
            },
            async getMedicalList() {
                let params = {
                    // 患者 ID 从本地存储空间的 pid 获得
                    patientId: localStorage.pid,
                    period: this.period,
                    //默认取一页10条数据
                    page: this.currentPage,
                    type: 3,

                    pageSize: 10
                };
                let url = getUrl() + this.url.getMedicalList;
                const res = await postAction(url, params);
                if (res.data.success) {
                    //判断有无打卡记录 无打卡记录显示无内容页面
                    if (res.data.result.count == 0) {
                        this.nothing = 2
                    } else {
                        this.nothing = 1
                        this.totalPage = res.data.result.totalPage;
                        this.list = res.data.result.recordList;
                        console.log(this.list);
                        //处理接口返回多张图片
                        for (let index = 0; index < res.data.result.count; index++) {
                            if (res.data.result.recordList[index].medicalRecordMorning) {
                                if (res.data.result.recordList[index].medicalRecordMorning.medicalRecordPhoto) {
                                    res.data.result.recordList[index].medicalRecordMorning.medicalRecordPhoto =
                                        res.data.result.recordList[index].medicalRecordMorning.medicalRecordPhoto.split(",");
                                }

                            }
                            if (res.data.result.recordList[index].medicalRecordNoon) {
                                if (res.data.result.recordList[index].medicalRecordNoon.medicalRecordPhoto) {
                                    res.data.result.recordList[index].medicalRecordNoon.medicalRecordPhoto =
                                        res.data.result.recordList[index].medicalRecordNoon.medicalRecordPhoto.split(",");
                                }

                            }
                            if (res.data.result.recordList[index].medicalRecordNight) {
                                if (res.data.result.recordList[index].medicalRecordNight.medicalRecordPhoto) {
                                    res.data.result.recordList[index].medicalRecordNight.medicalRecordPhoto =
                                        res.data.result.recordList[index].medicalRecordNight.medicalRecordPhoto.split(",");
                                }

                            }
                            if (res.data.result.recordList[index].medicalRecordBeforeSleep) {
                                if (res.data.result.recordList[index].medicalRecordBeforeSleep.medicalRecordPhoto) {
                                    res.data.result.recordList[index].medicalRecordBeforeSleep.medicalRecordPhoto =
                                        res.data.result.recordList[index].medicalRecordBeforeSleep.medicalRecordPhoto.split(",");
                                }

                            }

                        }

                    }
                }
            },

            onClickLeft() {
                window.location.href = '../dailyIndex.html?userid='+localStorage.pid
            },
            onClickRight() {
                window.location.href = '../index.html?userid=' + localStorage.pid
            },
        },

        created() {
            this.getMedicalList()
        },
    });
    app.use(vant);


    app.use(vant.Lazyload);
    app.use(VueViewer.default);

    app.mount('#app');
</script>

</html>